import React, {Component} from 'react';
import {Link} from 'react-router-dom';
import axios from 'axios';
import './jisu.scss';
import win from '@/assets/icon_title.png';
export default class JiSu extends Component{
    constructor(props){
        super(props);
        this.state = {
            classList: [
                {
                    link: '/JiSu/haiwai',
                    title: '海外直供',
                    src: 'http://mp5.jmstatic.com/mobile/other/detail_page_guarantee/interantion_shipping.png?imageView2/2/w/51/q/70'
                },{
                    link: '/JiSu/yuanzhuang',
                    title: '原装正品',
                    src: 'http://mp5.jmstatic.com/mobile/other/detail_page_guarantee/genuine_guarantee.png?imageView2/2/w/51/q/70'
                }
                ,{
                    link: '/JiSu/jisu',
                    title: '极速到货',
                    src: 'http://mp5.jmstatic.com/mobile/other/detail_page_guarantee/global_delivery.png?imageView2/2/w/51/q/70'
                },{
                    link: '/JiSu/qingsong',
                    title: '轻松验货',
                    src: 'http://mp5.jmstatic.com/mobile/other/detail_page_guarantee/return_guarantee_7.png?imageView2/2/w/51/q/70'
                }
            ]
        }
    }
    componentDidMount(){
        axios.get('http://s.h5.jumei.com/yiqituan/tab_list?tab=coutuan_home&page=1&per_page=20',{
            'Access-Control-Allow-Origin': '*',
            proxy: {
                host: 'http://localhost',
                port: 3000
            }
        }).then((res)=>{
            console.log(res);
        })
    }
    render () {
        return (
            <div className="jisu">
                <div className="class_list">
                    <ul>
                        {
                            this.state.classList.map((item, index) => {
                                return (
                                    
                                    <li key={index}>
                                         <Link to="/jisubar">
                                        <img src={item.src} alt=""/>
                                        <span>{item.title}</span>
                                        </Link>
                                    </li>
                                   
                                )
                            })
                        }
                    </ul>
                </div>
                <div className="jisu_list">
                        <div className="jisu_header">
                            <img src={win} alt=""/>今日团购，每日十点上新
                        </div>
                        <ul>
                            <li>
                                <Link to="/detail">
                                    <div className="list_img">
                                    <img alt="" src="http://mp6.jmstatic.com/product/004/404/4404616_std/4404616_1000_1000.jpg?v=1531382722&imageView2/2/w/264/q/90"/>
                                    </div>
                                    <div className="product">
                                        <p className="product_name">
                                            JMsolution 蜂胶蜂蜜面膜+水光SOS针剂面膜套装20片
                                        </p>
                                        <div className="produce_price">
                                            <span className="money_class">￥</span>
                                            <span className="money_now">998</span>
                                            <del className="money_before">12</del>
                                        </div>
                                    </div>
                                </Link>
                            </li>
                            <li>
                                <Link to="/detail">
                                    <div className="list_img">
                                    <img alt="" src="http://mp6.jmstatic.com/product/004/404/4404616_std/4404616_1000_1000.jpg?v=1531382722&imageView2/2/w/264/q/90"/>
                                    </div>
                                    <div className="product">
                                        <p className="product_name">
                                            JMsolution 蜂胶蜂蜜面膜+水光SOS针剂面膜套装20片
                                        </p>
                                        <div className="produce_price">
                                            <span className="money_class">￥</span>
                                            <span className="money_now">998</span>
                                            <del className="money_before">12</del>
                                        </div>
                                    </div>
                                </Link>
                            </li>
                            <li>
                                <Link to="/detail">
                                    <div className="list_img">
                                    <img alt="" src="http://mp6.jmstatic.com/product/004/404/4404616_std/4404616_1000_1000.jpg?v=1531382722&imageView2/2/w/264/q/90"/>
                                    </div>
                                    <div className="product">
                                        <p className="product_name">
                                            JMsolution 蜂胶蜂蜜面膜+水光SOS针剂面膜套装20片
                                        </p>
                                        <div className="produce_price">
                                            <span className="money_class">￥</span>
                                            <span className="money_now">998</span>
                                            <del className="money_before">12</del>
                                        </div>
                                    </div>
                                </Link>
                            </li>
                            <li>
                                <Link to="/detail">
                                    <div className="list_img">
                                    <img alt="" src="http://mp6.jmstatic.com/product/004/404/4404616_std/4404616_1000_1000.jpg?v=1531382722&imageView2/2/w/264/q/90"/>
                                    </div>
                                    <div className="product">
                                        <p className="product_name">
                                            JMsolution 蜂胶蜂蜜面膜+水光SOS针剂面膜套装20片
                                        </p>
                                        <div className="produce_price">
                                            <span className="money_class">￥</span>
                                            <span className="money_now">998</span>
                                            <del className="money_before">12</del>
                                        </div>
                                    </div>
                                </Link>
                            </li>
                        </ul>
                 </div>
            </div>
        )
    }
}